
//视口宽度2倍(像素)大小
@total-width:750;

html{
    font-size: (100vw/@total-width) * 40;
    background-color: #eff0f4;
} 

.w{
    width: (693/40rem);
    margin: 0 auto;
}
a{
    text-decoration:none;
}
.top-bar:extend(.w){
    height: (175/40rem);
    display: flex; //弹性容器开启
    justify-content: space-between; //左右对齐方式
    align-items: center; //上下对齐方式
    
    a{
        color: #24253d;
        font-size: (50/40rem);
        i{
            color: #999;
            font-size: (40/40rem);
        }
    }
}

.banner:extend(.w){
    img{
        width: 100%;
    }
}

.menu:extend(.w){
    height: (329/40rem);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-evenly;
    
    a{
        width: (327/40rem);
        height: (104/40rem);
        line-height: $height;
        color: #fff;
        border-radius: (10/40rem);
        i{
            margin: 0 (32/40rem) 0 (38/40rem);
        }
    }
    .course{
        background-color: #f97053;
    }
    .star{
        background-color: #cd6efe;
    }
    .sub{
        background-color: #fe4479;
    }
    .download{
        background-color: #1bc4fb;
    }
}

.course-list:extend(.w){
    height: (400/40rem);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-bottom: (25/40rem);
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    h2{
        font-size: (33/40rem);
        border-left: 2px solid #3a84ff;
        padding-left: 10px;
    }
    a{
        font-size: (28/40rem);
        color: #656565;
    }
}

.item-list{
    padding: (20/40rem) 0;
    width: (720/40rem);
    display: flex;
    align-items: center;
    overflow: auto;
    &::-webkit-scrollbar{display: none;} //隐藏谷歌滚动条
}


.item{
    flex: none;
    box-sizing: border-box;
    width: (320/40rem);
    height: (324/40rem);
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 10px;
    padding: 0 (22/40rem);
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    margin-right: (24/40rem);
    img{
        width: 100%;
        vertical-align: top;
    }


    .course-title{
        font-size: (32/40rem);
        color: #24253d;
    }
    .user-info{
        display: flex;
        align-items: center;
    }
    .avatar{
        width: (42/40rem);
        height: (42/40rem);
        border-radius: 50%;
        overflow: hidden;
    }
    .nickname{
        margin-left: 5px;
        font-size: (24/40rem);
        color: #969393;
    }
}